<template>
	<view class="main">
		<view class="title-log"><text>重庆学院院系报告</text></view>
		<view class="main-inside">
			<view class="select-box">
				<view class="select"><uni-data-select v-model="data.value" :localdata="data.arr"></uni-data-select></view>
				<view class="end-time">截至日期：{{ data.endTime}}</view>
			</view>
			
			<!-- 总览 -->
			<view class="overview basc-padding">
				<view class="">
					<view>
						<text class="blue-size">{{ data.specNum }}</text>
						<text class="gray-size">（个）</text>
					</view>
					<text class="black-size">本科专业总数</text>
				</view>
				<view class="">
					<view>
						<text class="blue-size">{{ data.people }}</text>
						<text class="gray-size">（人）</text>
					</view>
					<text class="black-size">在校人数</text>
				</view>
			</view>
			
			<!-- 专业数据 -->
			<view class="title-box">
				<view class="title-pie"></view>
				<text class="title">专业数据</text>
			</view>
			<view class="basc-box basc-padding">
				<view class="view-item">
					<view>
						<text class="blue-size">{{data.proData.one}}</text>
						<text class="gray-size">（个）</text>
					</view>
					<text class="black-size">本科专业其中新专业数</text>
				</view>
				<view class="view-item">
					<view>
						<text class="blue-size">{{data.proData.two}}</text>
						<text class="gray-size">（个）</text>
					</view>
					<text class="black-size">本科专业覆盖学科门类数</text>
				</view>
				<view class="view-item">
					<view>
						<text class="blue-size">{{data.proData.three}}</text>
						<text class="gray-size">（学分）</text>
					</view>
					<text class="black-size">院系专业平均总学分</text>
				</view>
			</view>
			
			<!-- 课程数据 -->
			<view class="title-box">
				<view class="title-pie"></view>
				<text>课程数据</text>
			</view>
			<view class="basc-box basc-padding">
				<view class="view-item">
					<view>
						<text class="blue-size">{{data.lessonData.one}}</text>
						<text class="gray-size">（门）</text>
					</view>
					<text class="black-size">课程门数</text>
				</view>
				<view class="view-item">
					<view>
						<text class="blue-size">{{data.lessonData.two}}</text>
						<text class="gray-size">（门）</text>
					</view>
					<text class="black-size">实验课门数</text>
				</view>
				<view class="view-item">
					<view>
						<text class="blue-size">{{data.lessonData.three}}</text>
						<text class="gray-size">（个）</text>
					</view>
					<text class="black-size">当年校外实训基地数量</text>
				</view>
				<view class="view-item">
					<view>
						<text class="blue-size">{{data.lessonData.four}}</text>
						<text class="gray-size">（学时）</text>
					</view>
					<text class="black-size">学校创新创业教育课程学时数</text>
				</view>
				<view class="view-item">
					<view>
						<text class="blue-size">{{data.lessonData.five}}</text>
						<text class="gray-size">（门）</text>
					</view>
					<text class="black-size">省部级以上在线开放课程数</text>
				</view>
			</view>
		
			<!-- 开课课程门次类别分布 -->
			<view class="title-box">
				<text class="title">开课课程门次类别分布</text>
			</view>
			<view class="basc-box basc-padding">
				<ucharts></ucharts>
			</view>
			
			<!-- 开课课程门数类别分布 -->
			<view class="title-box">
				<text class="title">开课课程门数类别分布</text>
			</view>
			<view class="basc-box basc-padding">
				
			</view>
			
			<!-- 教师数据 -->
			<view class="title-box">
				<view class="title-pie"></view>
				<text class="title">教师数据</text>
			</view>
			<view class="basc-box basc-padding">
				<view class="view-item">
					<view>
						<text class="blue-size">{{data.teacherData.one }}</text>
						<text class="gray-size">（人）</text>
					</view>
					<text class="black-size">教师人数</text>
				</view>
				<view class="view-item">
					<view>
						<text class="blue-size">{{data.teacherData.two }}</text>
					</view>
					<text class="black-size">教师比</text>
				</view>
			</view>
		
			<!-- 教师职称分布 -->
			<view class="title-box">
				<text class="title">教师职称分布</text>
			</view>
			<view class="basc-box basc-padding"></view>
		
			<!-- 教师年龄结构分布 -->
			<view class="title-box">
				<text class="title">教师年龄结构分布</text>
			</view>
			<view class="basc-box basc-padding"></view>
		
			<!-- 教师学位结构分布 -->
			<view class="title-box">
				<text class="title">教师学位结构分布</text>
			</view>
			<view class="basc-box basc-padding"></view>
		
		</view>	
		
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	const data = ref({
		value:0,
		arr:[
			{value:0,text:'软件学院'},
			{value:1,text:'土木学院'},
			{value:2,text:'管理学院'},
		],
		endTime:'2022.7.14',
		specNum:8,
		people:87836,
		proData:{
			one:4,
			two:12,
			three:126
		},
		lessonData:{
			one:668,
			two:298,
			three:1298,
			four:1487,
			five:14
		},
		teacherData:{
			one:126,
			two:20.73
		},

	})
</script>

<style scoped lang="scss">
	.main{
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color:rgba(244, 245, 249, 1);
	}
	
	//头部
	.title-log{
		width: 100%;
		height: 260rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: url(https://img.js.design/assets/img/62f37b90fd4d66952f506e10.png) no-repeat;
		background-size: cover;
		text{
			color: rgba(255, 255, 255, 1);
			font-size: 56rpx;
			font-weight: 700;
			letter-spacing: 4rpx;
		}
	}
	
	.main-inside{
		padding: 40rpx 30rpx;
		box-sizing: border-box;
	}
	
	.basc-padding{
		padding: 40rpx 30rpx;
	}
	
	.blue-size{
		color:rgba(24, 144, 255, 1);
		font-size: 70rpx;
		font-weight: 700;
	}
	
	.grey-size{
		font-size: 24rpx;
		color:rgba(102, 102, 102, 1) ;
		font-weight: 400;
	}
	
	.black-size{
		width: 100%;
		display: block;
		color:rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: 400;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
		
	}
	
	.title-box{
		display: flex;
		margin: 50rpx 0 30rpx 0;
		align-items: center;
	}
	
	.title{
		font-size: 32rpx;
		font-weight: 500;
		color:rgba(51, 51, 51, 1);
	}
	
	.title-pie{
		width: 12rpx;
		height: 32rpx;
		background-color:rgba(246, 192, 34, 1);
		border-radius: 215rpx;
		margin-right: 10rpx;
	}
	
	.basc-box{
		width: calc(100% - 60rpx);
		border-radius: 16rpx;
		background-color:rgba(255, 255, 255, 1);
		display: flex;
		flex-wrap: wrap;
		.view-item{
			width: 50%;
			margin-bottom: 20rpx;
		}
	}
	
	//下拉-截至日期
	.select-box{
		width: 100%;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		.select{
			width: 50%;
		}
		.end-time{
			width: 50%;
			display: flex;
			flex-direction: row-reverse;
			font-size: 24rpx;
			font-weight: 400;
			color:rgba(153, 153, 153, 1) ;
		}
	}
	
	//总览
	.overview{
		width: calc(100% - 60rpx);
		border-radius: 16rpx;
		background: linear-gradient(180deg, rgba(201, 225, 250, 1) 0%, rgba(232, 239, 249, 1) 100%);
		display: flex;
		view{
			width: 50%;
		}
	}
	
	//专业数据
	
</style>
